<template>
  <el-form
    class="device-sensor-search"
    :label-position="'right'"
    label-width="100px"
    :model="fromObj"
    style="max-width: 460px"
  >
    <el-form-item label="EUI">
      <el-input size="small" v-model="fromObj.eui" placeholder="请输入eui" />
    </el-form-item>
    <el-form-item label="设备群组">
      <!-- <el-input size="small" v-model="params.devGroup" placeholder="请选择设备群组"/> -->

      <el-select
        v-model="fromObj.devGroup"
        class="m-2"
        placeholder="请选择群组"
        size="large"
      >
        <el-option
          v-for="item in groupList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>

    <el-form-item label="在线状态">
      <el-select
      v-model="fromObj.online"
        class="m-2"
        placeholder="选择在线状态"
        size="large"
      >
        <el-option key="all" label="全部" value="all" />
        <el-option :key="true" label="在线" :value="true" />
        <el-option :key="false" label="离线" :value="false" />
      </el-select>
    </el-form-item>
    <el-form-item label="绑定时间">
         <el-date-picker
      v-model="fromObj.dateObj"
      type="datetimerange"
      range-separator="To"
      start-placeholder="Start date"
      end-placeholder="End date"
    />
    </el-form-item>
    <el-form-item>
      <el-button-group class="ml-4">
        <el-button @click="search" type="primary">搜索</el-button>
        <el-button @click="condition" type="primary">清除条件</el-button>
        <el-button @click="refresh" type="primary">刷新</el-button>
        <span class="ml-20">总数: {{ total }}</span>
      </el-button-group>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
import * as api from "../../../api/index";

defineProps({
  total: Number,
  eui: Number,
  devGroup: String,
  online: String,
  dateObj: Object,
  // date:String
});

const emit = defineEmits(["search","condition","refresh"]);
const fromObj = reactive({
    devGroup:'',
    eui:'',
    online:'',
    dateObj:'',
    // date:'',
})
// 点击搜索, 传数据给父组件
const search = () => {
  emit("search",fromObj);
};
// 点击条件, 传数据给父组件
const condition = () => {
  emit("condition",fromObj);
};
// 点击刷新, 传数据给父组件
const refresh = () => {
  emit("refresh",fromObj);
};

// const value = ref("");
// 群组列表
const groupList = ref([]);
// 请求群组列表
const getGroupList = () => {
  api.$groupList().then((res) => {
    groupList.value = res.data.map((item) => {
      return {
        value: item.id,
        label: item.groupName
      };
    });
  });
};
onMounted(getGroupList);
</script>

<style lang="less">
.device-sensor-search {
  .el-form-item {
    margin-bottom: 3px;
  }
}
</style>
